// var domain = "https://xinxigang-jy-end.hzdctech.com/v1/";
var domain = "http://gx-api.zhiwangyunchuang.com:800/v1/";
var pageSize = 10;
var begin_date = getDay(6);
var end_date = getDay();

//获取时间
function getDay(num = 0) {
    let date = new Date();
    date.setDate(date.getDate() - num)
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    if (month < 10) {
        month = "0" + month;
    }
    let day = date.getDate();
    if (day < 10) {
        day = "0" + day;
    }
    return year + "-" + month + "-" + day
}

function request(url, data = {}, method = 'post') {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: domain + url,
            type: method,
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            async: false,
            success: function (res) {
                if (res.code == 0) {
                    resolve(res.datas)
                } else {
                    reject(res)
                }
            }
        });
    })
}

function noDataTip($selector) {
    var currModH = $selector.height();
    var top = currModH > 180 ? "35%" : "13%";
    var $li = ["<div class='no-data' style='width:90%;position: absolute;top:" + top + ";text-align:center;color:#a59999;'>", "<img src='../static/images/no-data.png' style='width:200px;height:200px;'/>", "<div style='font-size:16px;opacity:0.7;color:#fff;'>暂无数据</div>", "</div>"]
    $selector.append($li.join(""));
}

/**
 * 班级列表-下拉
 * */
function teamList() {
    return request('teamList')
}

/**
 * 学生列表-下拉
 * */
function studentList(data) {
    return request('studentList', data)
}

/**
 * 材料列表-下拉
 * {"classno":"大1班"}
 * */
function cateList(data) {
    return request('cateList', data)
}

/**
 * 作品列表-下拉
 * */
function productList() {
    return request('productList')
}

/**
 * 学生使用材料列表-图表
 * */
async function getCateUsageChartByStudents(data) {
    let res = await request('getCateUsageChartByStudents', data)
    let legend = res.user_cate_usage.catename;
    let xAxisData = res.user_cate_usage.username;
    let series = [];
    let color = [["#0c79cc", "#28a0f7"], ["#12ac76", "#47cca1"], ["#1e3db1", "#275ffc"], ["#413cf1", "#5c5dff"], ["#f2902d", "#f9ce68"]];
    res.user_cate_usage.usage_num.map((item, index) => {
        series.push({
            name: item.name, type: 'bar', barWidth: 10, barGap: '50%', itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0, color: color[index][0]
                    }, {
                        offset: 0.8, color: color[index][1]
                    }], false), shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
            }, data: item.data
        })
    })

    var option = {
        tooltip: {trigger: 'axis',}, grid: {left: '8%', right: '0%', bottom: '10%'}, legend: {
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            data: legend,
            right: '10px',
            top: '10px',
            textStyle: {fontSize: 12, color: '#fff'}
        }, xAxis: [{
            type: 'category',
            axisLine: {lineStyle: {color: '#57617B'}},
            axisLabel: {interval: 0, textStyle: {color: '#fff',}},
            data: xAxisData
        }], yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {lineStyle: {color: '#57617B'}},
            axisLabel: {margin: 10, textStyle: {fontSize: 12}, textStyle: {color: '#fff'}, formatter: '{value}'},
            splitLine: {
                show: true, lineStyle: {
                    type: 'dashed', color: ['#25CEF3']
                }
            }

        }], series: series
    };
    var myChart = echarts.init(document.getElementById('material-students-list'));
    myChart.clear();
    myChart.setOption(option);
    /*if (series.length > 0) {
        myChart.setOption(option);
    } else {
        noDataTip($("#material-students-list"));
    }*/
}

/**
 * 学生使用材料列表--表格
 * */
async function getCateUsageTableByStudents(data) {
    let res = await request('getCateUsageTableByStudents', data)
    let pic = ['pencile.png', 'cicle.png', 'nitiao.png']
    let receiveHtml = '';
    let i = 0;
    for (item in res.receive_number_total) {
        receiveHtml += '<div class="count-material-item"> <img src="images/cate_icon_' + (i % 5 + 1) + '.png" class="left text01_img" /> <div class="left text01_div"> <p>' + item + '</p> <p>' + res.receive_number_total[item] + '<i>个</i></p> </div> </div>'
        i++;
    }
    $('#receive_number_total').html(receiveHtml);
    let usageHtml = '';
    let j = 0;
    for (item in res.usage_number_total) {
        usageHtml += '<div class="count-material-item"> <img src="images/cate_icon_' + (j % 5 + 1) + '.png" class="left text01_img" /> <div class="left text01_div"> <p>' + item + '</p> <p>' + res.usage_number_total[item] + '<i>个</i></p> </div> </div>'
        j++;
    }
    $('#usage_number_total').html(usageHtml);
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createtime + '</td><td>' + item.username + '</td><td>' + item.catename + '</td><td>' + item.ncount + '</td><td>' + item.receive_num + '</td></tr>';
    })
    $('#usageTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 5);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeUsagePage(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeUsagePage(' + (data.page + 1) + ')">></div>';
    }
    $('#usagePage').html(page)
}

function changeUsagePage(page) {
    let student = $('#students_select_1').val();
    getCateUsageTableByStudents({student_id_arr: student, page: page});
}

/**
 * 班级材料使用情况统计表--图表
 * */
async function getCateUsageChartByClassNo(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('getCateUsageChartByClassNo', data)
    var myChart = echarts.init(document.getElementById('class-material-situation'));
    myChart.clear();
    myChart.setOption({
        color: ['#0178de', '#31a0f9'], grid: {
            left: '5%', right: '5%', bottom: '5%', containLabel: true
        }, tooltip: {
            trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人"
        }, calculable: true, xAxis: [{
            type: 'category', data: res.list.catename, axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, axisLabel: {
                interval: 0, rotate: 40, textStyle: {
                    color: '#fff'
                }
            }
        }], yAxis: [{
            type: 'value', axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, splitLine: {
                "show": false
            }, axisLabel: {
                textStyle: {
                    color: '#fff'
                }, formatter: function (value) {
                    return value + ""
                },
            },
        }], series: [{
            name: '材料使用情况', type: 'bar', barWidth: 20, data: res.list.total,
        },]
    })
}

/**
 * 班级材料使用情况统计表--表格
 * */
async function getCateUsageTableByClassNo(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('getCateUsageTableByClassNo', data)
    $('#cateUsageCount').html(res.receive_count_total);
    $('#cateUsageNumber').html(res.receive_number_total);
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.catename + '</td><td>' + item.ncount + '</td><td>' + item.receive_num + '</td></tr>';
    })
    $('#cateUsageTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 14);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCateUsage(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCateUsage(' + (data.page + 1) + ')">></div>';
    }
    $('#cateUsagePage').html(page)
}

function changeCateUsage(page) {
    let classno = $('#center_team_select').val();
    getCateUsageTableByClassNo({classno: classno, page: page});
}

/**
 * 学生使用材料明细--表格
 * */
async function studentUsageCateList(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('studentUsageCateList', data)
    $('#stuUsageCatTotal').html(res.receive_count_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.username + '</td><td>' + item.catename + '</td><td>' + item.ncount + '</td></tr>';
    })
    $('#stuUsageCatTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 7);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeStuUsageCat(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeStuUsageCat(' + (data.page + 1) + ')">></div>';
    }
    $('#stuUsageCatPage').html(page)
}

function changeStuUsageCat(page) {
    studentUsageCateList({page: page});
}

/**
 * 作品输出统计表--表格
 * */
async function productMakeList(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    data.classno = $('#center_team_select').val();
    let res = await request('productMakeList', data)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createtime + '</td><td>' + item.username + '</td><td>' + item.catename + '</td><td>' + item.productname + '</td><td><img src="' + item.cover + '" style="height: 30px; margin: 5px 0;"></td></tr>';
    })
    $('#proMakeListTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 12);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeProMakeList(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeProMakeList(' + (data.page + 1) + ')">></div>';
    }
    $('#proMakeListPage').html(page)
}

function changeProMakeList(page) {
    productMakeList({page: page});
}

/**
 * 材料回收情况统计表--图表
 * */
async function getCateRecoveryChartByClassNo(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('getCateRecoveryChartByClassNo', data)
    var myChart = echarts.init(document.getElementById('class-one-material-unuse-situation'));
    myChart.clear();
    myChart.setOption({
        color: ['#00d887', '#51e4ad'], grid: {
            left: '5%', right: '5%', bottom: '5%', containLabel: true
        }, tooltip: {
            trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人"
        }, calculable: true, xAxis: [{
            type: 'category', data: res.list.catename, axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, axisLabel: {
                interval: 0, rotate: 40, textStyle: {
                    color: '#fff'
                }
            }
        }], yAxis: [{
            type: 'value', axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, splitLine: {
                "show": false
            }, axisLabel: {
                textStyle: {
                    color: '#fff'
                }, formatter: function (value) {
                    return value + ""
                },
            },
        }], series: [{
            name: '材料使用情况', type: 'bar', barWidth: 20, data: res.list.total,
        },]
    })
}

/**
 * 材料回收统计表--表格
 * */
async function getCateRecoveryTableByClassNo(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('getCateRecoveryTableByClassNo', data)
    $('#cateRecoveryOut').html(res.receive_count_total)
    $('#cateRecoveryIn').html(res.usage_count_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdata + '</td><td>' + item.catename + '</td><td>' + item.receive_count_total + '</td><td>' + item.usage_count_total + '</td></tr>';
    })
    $('#cateRecoveryTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 9);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCateRecovery(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCateRecovery(' + (data.page + 1) + ')">></div>';
    }
    $('#cateRecoveryPage').html(page)
}

function changeCateRecovery(page) {
    let classno = $('#center_team_select').val();
    getCateRecoveryTableByClassNo({classno: classno, page: page});
}

/**
 * 材料回收明细表--表格（明细）
 * */
async function getCateRecoveryInfoTableByClassNo(data) {
    data.begin_date = $('#center_stime').val() || begin_date;
    data.end_date = $('#center_etime').val() || end_date;
    let res = await request('getCateRecoveryInfoTableByClassNo', data)
    $('#cateRecoveryInfoOut').html(res.receive_count_total)
    $('#cateRecoveryInfoIn').html(res.usage_count_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.catename + '</td><td>' + item.ku_type + '</td><td>' + item.ncount + '</td></tr>';
    })
    $('#cateRecoveryInfoTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 13);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCateRecoveryInfo(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCateRecoveryInfo(' + (data.page + 1) + ')">></div>';
    }
    $('#cateRecoveryInfoPage').html(page)
}

function changeCateRecoveryInfo(page) {
    let classno = $('#center_team_select').val();
    getCateRecoveryInfoTableByClassNo({classno: classno, page: page});
}

/**
 * 某班使用材料情况统计--图表&表格
 * */
async function cateSelectChart(data) {
    data.begin_date = $('#right_stime_1').val() || begin_date;
    data.end_date = $('#right_etime_1').val() || end_date;
    data.classno = $('#right_team_select_1').val()
    data.student_id_arr = $('#right_students_select_1').val()
    let res = await request('cateSelectChart', data)
    let series = [];
    res.chart_data.usage_num.map(item => {
        series.push({name: item.name, type: 'line', data: item.data})
    })
    var myChart = echarts.init(document.getElementById('student-use-material-time'));
    myChart.clear();
    myChart.setOption({
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: res.chart_data.cate_list, textStyle: {
                color: '#fff'
            }, top: '8%', right: '5px'
        },
        grid: {
            top: '40%', left: '3%', right: '4%', bottom: '3%', containLabel: true
        },
        color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
        xAxis: {
            type: 'category', boundaryGap: false, data: res.chart_data.date_list, splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            name: '', type: 'value', splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: series
    });

    $('#cateSelectChartTotal').html(res.usage_count_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.catename + '</td><td>' + item.ncount + '</td></tr>';
    })
    $('#cateSelectChartTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 14);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCateSelectChart(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCateSelectChart(' + (data.page + 1) + ')">></div>';
    }
    $('#cateSelectChartPage').html(page)
}

function changeCateSelectChart(page) {
    cateSelectChart({page: page});
}

/**
 * 某班所有学生使用材料情况--柱形图&饼图
 * */
async function studentCateUsageColumnAndPieChart() {
    let data = {};
    data.begin_date = $('#right_stime_1').val() || begin_date;
    data.end_date = $('#right_etime_1').val() || end_date;
    data.classno = $('#right_team_select_1').val()
    let res = await request('studentCateUsageColumnAndPieChart', data)
    var myChart1 = echarts.init(document.getElementById('class-one-material-use-situation'));
    myChart1.clear();
    myChart1.setOption({
        color: ['#ffb318', '#ffdd90'], grid: {
            left: '5%', right: '5%', bottom: '5%', containLabel: true
        }, tooltip: {
            trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人"
        }, calculable: true, xAxis: [{
            type: 'category', data: res.chart_data.catename, axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, axisLabel: {
                interval: 0, rotate: 40, textStyle: {
                    color: '#fff'
                }
            }
        }], yAxis: [{
            type: 'value', axisLine: {
                lineStyle: {
                    color: '#5bc0de'
                },
            }, splitLine: {
                "show": false
            }, axisLabel: {
                textStyle: {
                    color: '#fff'
                }, formatter: function (value) {
                    return value + ""
                },
            },
        }], series: [{
            name: '材料使用情况', type: 'bar', barWidth: 20, data: res.chart_data.count,
        },]
    })

    var myChart2 = echarts.init(document.getElementById("class-one-material-use-situation-circle"), 'infographic');
    myChart2.clear();
    myChart2.setOption({
        title: {
            x: 'center'
        }, tooltip: {
            trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"
        }, legend: {
            orient: 'vertical', left: 'left', data: res.chart_data.catename, textStyle: {color: '#fff'}
        },

        label: {
            normal: {
                textStyle: {
                    color: 'red'  // 改变标示文字的颜色
                }
            }
        }, series: [{
            name: '小一班所有学生使用材料情况',
            type: 'pie',
            radius: ['30%', '55%'],
            center: ['50%', '60%'],
            data: res.chart_data.count,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10, shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }

        }]
    });
}

/**
 * 某班所有学生使用材料情况--表格
 * */
async function studentCateUsageTable(data) {
    data.begin_date = $('#right_stime_1').val() || begin_date;
    data.end_date = $('#right_etime_1').val() || end_date;
    data.classno = $('#right_team_select_1').val()
    let res = await request('studentCateUsageTable', data)
    $('#studentCateUsageTotal').html(res.usage_count_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.username + '</td><td>' + item.catename + '</td><td>' + item.ncount + '</td></tr>';
    })
    res.table_data.total = res.usage_count_total
    $('#studentCateUsageTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 6);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeStudentCateUsage(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeStudentCateUsage(' + (data.page + 1) + ')">></div>';
    }
    $('#studentCateUsagePage').html(page)
}

function changeStudentCateUsage(page) {
    studentCateUsageTable({page: page});
}

/**
 * 材料选用的单一与多样
 * {classno: "大1班", student_id: '202010101'}
 * */
async function cateDiversity(data) {
    let res = await request('cateDiversity', data)
    let legend = res.chart_data.cate_list;
    let xAxisData = res.chart_data.date_list;
    let series = [];
    let color = [["#0c79cc", "#28a0f7"], ["#12ac76", "#47cca1"], ["#1e3db1", "#275ffc"], ["#413cf1", "#5c5dff"], ["#f2902d", "#f9ce68"]];
    res.chart_data.usage_num.map((item, index) => {
        series.push({
            name: item.name, type: 'line', data: item.data
        })
    })

    let option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: legend, textStyle: {
                color: '#fff'
            }, top: '8%', right: '5px'
        },
        grid: {
            top: '40%', left: '3%', right: '4%', bottom: '3%', containLabel: true
        },
        color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
        xAxis: {
            type: 'category', boundaryGap: false, data: xAxisData, splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value', splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: series
    };
    var myChart = echarts.init(document.getElementById('use-material-ways'));
    myChart.clear();
    myChart.setOption(option);
}

/**
 * 作品材料统计表
 * */
async function productCateCount(data) {
    data.begin_date = $('#right_stime_2').val() || begin_date;
    data.end_date = $('#right_etime_2').val() || end_date;
    data.classno = $('#right_team_select_2').val()
    data.student_id_arr = $('#right_students_select_2').val()
    let res = await request('productCateCount', data)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createtime + '</td><td>' + item.classno + '</td><td>' + item.username + '</td><td>' + item.catename + '</td><td>' + item.productname + '</td></tr>';
    })
    $('#productCateCountTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 21);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeProductCateCount(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeProductCateCount(' + (data.page + 1) + ')">></div>';
    }
    $('#productCateCountPage').html(page)
}

function changeProductCateCount(page) {
    productCateCount({page: page});
}

/**
 * 根据作品查询学生的互动情况列表
 * */
async function productInteraction(data) {
    let res = await request('productInteraction', data)
    $('#product_interaction_total').html(res.product_interaction_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.username + '</td><td>' + item.interacttype + '</td><td>' + item.count + '</td></tr>';
    })
    $('#productInteractionTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 12);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeProductInteraction(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeProductInteraction(' + (data.page + 1) + ')">></div>';
    }
    $('#productInteractionPage').html(page)
}

function changeProductInteraction(page) {
    let product_id = $('#product_select_1').val();
    productInteraction({product_id: product_id, page: page});
}

/**
 * 查询当前学生对所有作品的互动记录
 * */
async function getProductInteractionByClassnoAndStudentid(data) {
    let res = await request('getProductInteractionByClassnoAndStudentid', data)
    $('#proIntByClaStuTotal').html(res.product_interaction_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.productname + '</td><td>' + item.interacttype + '</td><td>' + item.count + '</td></tr>';
    })
    $('#proIntByClaStuTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 20);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeProIntByClaStu(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeProIntByClaStu(' + (data.page + 1) + ')">></div>';
    }
    $('#proIntByClaStuPage').html(page)
}

function changeProIntByClaStu(page) {
    let student_id = $('#students_select_3').val();
    getProductInteractionByClassnoAndStudentid({student_id: student_id, page: page})
}

/**
 * 根据材料查询学生的互动情况
 * {"cate_id":"10010006","page":1}
 * */
async function cateInteraction(data) {
    let res = await request('cateInteraction', data)
    $('#cateInteractionTotal').html(res.interaction_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.username + '</td><td>' + item.interacttype + '</td><td>' + item.count + '</td></tr>';
    })
    $('#cateInteractionTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 12);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCateInteraction(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCateInteraction(' + (data.page + 1) + ')">></div>';
    }
    $('#cateInteractionPage').html(page)
}

function changeCateInteraction(page) {
    let cate_id = $('#cat_select_4').val();
    cateInteraction({cate_id: cate_id, page: page});
}

/**
 * [根据班级编号和学生id获取材料的互动列表]
 * */
async function getCateInteractionByClassnoAndStudentid(data) {
    let res = await request('getCateInteractionByClassnoAndStudentid', data)
    $('#catIntByClaStuTotal').html(res.interaction_total)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.catename + '</td><td>' + item.interacttype + '</td><td>' + item.count + '</td></tr>';
    })
    $('#catIntByClaStuTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 4);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeCatIntByClaStu(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeCatIntByClaStu(' + (data.page + 1) + ')">></div>';
    }
    $('#catIntByClaStuPage').html(page)
}

function changeCatIntByClaStu(page) {
    let student_id = $('#students_select_5').val();
    getCateInteractionByClassnoAndStudentid({student_id: student_id, page: page});
}

/**
 * 账户余额--图表
 * */
async function studentBalance() {
    let data = {};
    data.begin_date = $('#right_stime_3').val() || begin_date;
    data.end_date = $('#right_etime_3').val() || end_date;
    data.student_id = $('#right_students_select_3').val()
    let res = await request('studentBalance', data)
    var myChart = echarts.init(document.getElementById('account-balance'));
    myChart.clear();
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
        xAxis: {
            type: 'category', boundaryGap: false, data: res.chart_data.title, splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            name: '', type: 'value', splitLine: {
                show: false
            }, axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            type: 'line', data: res.chart_data.data
        }]
    };
    myChart.setOption(option);
}

/**
 * 账户余额--表格
 * */
async function studentBalanceList(data) {
    data.begin_date = $('#right_stime_3').val() || begin_date;
    data.end_date = $('#right_etime_3').val() || end_date;
    data.student_id = $('#right_students_select_3').val()
    let res = await request('studentBalanceList', data)
    let html = '';
    res.table_data.list.map((item, index) => {
        html += '<tr><td>' + item.createdate + '</td><td>' + item.amount + '</td></tr>';
    })
    $('#studentBalanceListTable tbody').html(html)
    let total = Math.ceil(res.table_data.total / 6);
    let page = '';
    if (data.page == 1) {
        page += '<div class="prev"><</div>';
    } else {
        page += '<div class="prev" onclick="changeStudentBalanceList(' + (data.page - 1) + ')"><</div>';
    }
    if (total > 0) {
        page += '<div class="page-num">' + data.page + '/' + total + '</div>';
    }
    if (data.page == total) {
        page += '<div class="next">></div>';
    } else {
        page += '<div class="next" onclick="changeStudentBalanceList(' + (data.page + 1) + ')">></div>';
    }
    $('#studentBalanceListPage').html(page)
}

function changeStudentBalanceList(page) {
    studentBalanceList({page: page});
}

/**
 * 材料使用对比--表格
 * */
async function cateUseContrast() {
    let data = {};
    data.begin_date = $('#bottom_stime').val() || begin_date;
    data.end_date = $('#bottom_etime').val() || end_date;
    data.student_id_arr = $('#bottom_students').val()
    data.cate_id_arr = $('#bottom_material').val()
    let res = await request('cateUseContrast', data)
    //console.log(res)
    let legend = res.chart_data.username;
    let xAxisData = res.chart_data.catename;
    let series = [];
    let color = [["#0c79cc", "#28a0f7"], ["#12ac76", "#47cca1"], ["#1e3db1", "#275ffc"], ["#413cf1", "#5c5dff"], ["#f2902d", "#f9ce68"]];
    res.chart_data.usage_num.map((item, index) => {
        series.push({
            name: item.name, type: 'bar', barWidth: 10, barGap: '50%', itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0, color: color[index][0]
                    }, {
                        offset: 0.8, color: color[index][1]
                    }], false), shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
            }, data: item.data
        })
    })

    var option = {
        tooltip: {trigger: 'axis',}, grid: {left: '8%', right: '0%', bottom: '10%'}, legend: {
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            data: legend,
            right: '10px',
            top: '10px',
            textStyle: {fontSize: 12, color: '#fff'}
        }, xAxis: [{
            type: 'category',
            axisLine: {lineStyle: {color: '#57617B'}},
            axisLabel: {interval: 0, textStyle: {color: '#fff',}},
            data: xAxisData
        }], yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {lineStyle: {color: '#57617B'}},
            axisLabel: {margin: 10, textStyle: {fontSize: 12}, textStyle: {color: '#fff'}, formatter: '{value}'},
            splitLine: {
                show: true, lineStyle: {
                    type: 'dashed', color: ['#25CEF3']
                }
            }

        }], series: series
    };
    var myChart = echarts.init(document.getElementById('material-students-use-contrast'));
    myChart.clear();
    myChart.setOption(option);
}

/**
 * 下载
 * */
function productCateCountExport() {
    let data = {};
    data.begin_date = $('#right_stime_2').val() || begin_date;
    data.end_date = $('#right_etime_2').val() || end_date;
    data.classno = $('#right_team_select_2').val()
    data.student_id_arr = JSON.stringify($('#right_students_select_2').val())

    let params = new URLSearchParams(data);
    window.open(domain + "productCateCountExport?" + params.toString());
    return;

    $.ajax({
        url: domain + "productCateCountExport",
        type: 'POST',
        data: JSON.stringify(data),
        //dataType: "json",
        processData: false,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        responseType: 'blob',
        success: function (res) {
            let blob = new Blob([res], {
                type: 'text/csv'
            });
            let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
            let a = document.createElement('a');//创建一个a标签
            a.href = url;//将a标签的href赋值为url
            a.download = '作品材料统计表.csv';//更改文件名为传来的fileName
            a.click();//点击a标签
            // 释放这个临时的对象url
            window.URL.revokeObjectURL(url);
        }
    });
}
